Step 2 - Create locale packs for additional locales

A locale pack is a kzb file that contains only the resources for a specific locale. Using Kanzi Engine API you can load the application resources used by a certain locale when you set that locale. That way you reduce the size of kzb files in your application.

In this step of the tutorial you first prepare the Kanzi Studio project for loading additional locales and then create styles and locale packs for the Japanese, Chinese, and Korean locales.

Prepare the Kanzi Studio project for loading additional locales

In this section you modify the Kanzi Studio project you created in the first step of the tutorial. You import the .po files which contain the resources for the additional locales and prepare the project so that instances of the LocaleButton prefab in the LocaleSelector use a custom property to control the locale of the application.

To prepare the project for loading additional locales:

1. In the Library > Localization right-click the Localization Table (Main) localization table, select Import Localization Table Manually, go to <KanziWorkspace>/Tutorials/Localization/Assets/Text, and import the ja-JP.po, zh-ZH.po, and ko-KR.po files that contain the text strings for the Japanese, Chinese, and Korean locales.
   Kanzi Studio creates locales specified in the .po files and adds the translations from the .po files to the localization table.
   
   
2. In the Library press Alt and right-click Property Types and select Property Type.
   
3. In the New Property Type window set:
   • Name to Localization.LocaleID
   • Category to LocaleButton
   • Data Type to Text
   • Editor to Locale selector

   Click Save.
   You use this custom property type to set the locale using the buttons in the LocaleSelector node.
   

4. In the Prefabs select the LocaleButton prefab and in the Properties add the Localization.LocaleID property.
   
5. In the resource dictionary of the LocaleButton prefab create an Alias that points to the Screen node so that you can access the Screen node from the LocaleButton prefab:
   1. In the Prefabs select the LocaleButton prefab, in the Dictionaries click + Add Resource, select Create > Alias, and set the Alias name to Screen.
      
   2. In the Dictionaries click the cell next to the alias name, click < Relative >, select Screen, and press Enter.
      
6. In the Prefabs select the LocaleButton, in the Node Components add the Toggle Button: Toggled On trigger, add the Set Property action, and set:
   • Target Item to #Screen
   • Target Property to Locale
   • Value From to Property
   • Source Item to <Relative> and .
     This way you get the value for the Screen node Locale property from the prefab instance used for setting the locale.
   • Source Property to Localization.LocaleID
   • Source Property Attribute to Whole property

   Click Save.
   

7. In the Project in the LocaleSelector node for the first LocaleButton prefab instance:
   1. In the Properties add the Localization.LocaleID property and set it to the locale you want to set with this button.
      
      For example, to set to default locale, in this case English, select the Invariant Language (Invariant Country) () value.
      
   2. In the Node Components right-click the Toggle Button: Toggled On trigger and select Remove.
      This way you replace the trigger that defined the locale to which the trigger switches in each instance of the prefab with a trigger defined in the prefab that gets the value for the locale from the Localization.LocaleID property of each prefab instance.
      
8. Repeat the previous step for each instance of the LocaleButton in the LocaleSelector node:
   • For the LocaleButton prefab instance that sets the Finnish locale set the Localization.LocaleID property to Finnish (Finland) (fi-FI)
   • For the LocaleButton prefab instance that sets the Spanish locale set the Localization.LocaleID property to Spanish (Spain) (es-ES).
9. In the Project press Alt and right-click the LocaleSelector node, and select Alias.
   You use this alias to access the LocaleSelector node using the Kanzi Engine API and to add to the node the buttons to load the locales from the locale packs you prepare in the next section of this step.
   

Create the styles for the additional locales

In this section you create the styles for the additional locales that use fonts which contain the Japanese, Chinese, and Korean glyphs.

To create the styles for additional locales:

1. Create the styles that set the font for each locale:
   1. Select File > Import > Import Fonts and from <KanziWorkspace>/Tutorials/Localization/Assets/Fonts import the fonts that include the Japanese, Chinese, and Korean glyphs. See Importing fonts.
      For example, import the notosanscjkjp-regular.otf for Japanese, the notosanscjkkr-regular.otf for Korean, and the notosanscjksc-regular.otf for Chinese.
      Make sure that the font you use includes all the glyphs for the text that you want to include in your Kanzi application.
      
   2. In the Localization Editor click + Add Resource, select Create > Named Style and name it LocaleStyle.
      
   3. In the Library > Styles right-click the LocaleStyle, select Duplicate, and name the style after the locale where you use it.
      For example, name the style for the Japanese locale LocaleStyle-jp, the style for the Chinese locale LocaleStyle-zh and the style for the Korean LocaleStyle-kr.
      
   4. In the Library select a style and in the Properties add and set the Font property to the font that contains the glyphs used by that locale.
      For example, for the Korean locale set the Font property to the notosanscjkkr-regular.otf font. For the default LocaleStyle set the Font to notosans-regular.ttf.
      
2. In the Localization Table in the column for each locale where you want to apply the styles you created, double-click the LocaleStyle cell and select the style you want to apply to that locale.
   For example, for the Japanese locale select LocaleStyle-jp. The Finnish and Spanish locales use the LocaleStyle which uses the default font.
   
3. In the Project select the RootPage node, in the Properties remove the Font property, add the Style property and set it to <ResourceID> and the resource ID to LocaleStyle.
   You need to remove the Font property in the RootPage because a property value which you set locally in a node overrides the value set in a style.
   
4. In the Prefabs > LocaleButton select the Text Block 2D, in the Properties next to the Font property click , and name the property Localization.LocaleButtonFont.
   This enables you to use the correct font for each locale name when navigating between locales that use fonts with different glyphs.
5. Select the Prefabs > LocaleButton and in the Properties remove the Localization.LocaleButtonFont property.
6. In the Project select each prefab instance and in the Properties add the Localization.LocaleButtonFont property, and set it to notosans-regular.ttf.
   

Create the locale packs

A locale pack is a kzb file that contains only the resources for a specific locale.

In this section you add to the project localized resources for the Japanese, Chinese, and Korean locales and create locale packs. In the next section you use the Kanzi Engine API to load the locale packs.

In the <KanziWorkspace>/Tutorials/Localization/Assets/Text directory you can find the .po files that contain all the text strings used in the Kanzi Studio project in this tutorial localized to Japanese, Chinese, and Korean.

To create a locale pack:

1. Create the text resource that you use to display the name of the locale in the LocaleButton node:
   1. In the Library > Localization double-click the Localization Table (Main) localization table to open it in the Localization Editor.
   2. Click + Add Resource, select Create > Text, and name the new text resource LocaleDisplayName.
      In the next step you use the Kanzi Engine API to set this text resource to show the name of the locale in the LocaleButton that you use to load that locale.
      
   3. In the column for each locale the resources of which you load from their own locale packs, click the LocaleDisplayName cell, enter the text you want to show in the LocaleButton for each locale, and press the Enter key.
      Because you want the users of this locale to find their locale, use the native name for each locale. For example, for Japanese use 日本語, for Korean use 한국어, and for Chinese use 中文.
      
2. In the Localization Table set the images you want to use for the Japanese, Chinese, and Korean locales.
   For example, for the Japanese locale use Image04, for the Korean locale use Image05 and for the Chinese locale use Image06.
   
3. In the Localization Table click next to the locale name of the Japanese, Chinese and Korean locales.
   This way you mark the locales for which you want to create a locale pack kzb file that contains only the resources used by that locale. Kanzi Studio does not export to the main kzb file the resources of locales marked in the localization table as locale packs.
   

4. In Kanzi Studio select File > Export > Export KZB. This command:
   

   • Creates one kzb file for each locale you marked in the localization table as a locale pack. When Kanzi Studio exports locale packs it names the kzb files after the locale the resources of which they contain. Each locale pack file contains only the resources used by that locale.
   • Creates the main kzb file that contains the entire Kanzi Studio project, except the resources of locales you mark as locale packs in the localization table.
   • Stores the locale pack kzb files in the <ProjectName>/Application/bin/Locale_packs, or the Locale_packs directory in the location you specify in the Binary Export Directory property in the Project > Properties.

   

See also

Localizing applications

Using locales

Using aliases

Using styles

Importing fonts

Property types

Open topic with navigation